<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>考试管理</title>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="header">
          <div class="float-left header-title">考试管理</div>
          <div class="float-right user-info">
            <div class="btn-group ml20 center-btn-group">
              <a href="" class="header-a" data-toggle="dropdown">
                <div class="user-cover"><img src="img/teacher-img-default.png" class="auto-img"></div>
                <div class="user-name"></div>
              </a>
              <ul class="dropdown-menu center-dropdown-menu">
                <!-- dropdown menu links -->
                <li><a href="user-center.html" target="_blank">个人中心</a></li>
                <li id="logout"><a href="javascript:void(0)">退出登录</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container body-container">
      <div class="row">
        <div class="span4 oprbtn-con">
          <button class="btn btn-success" id="create_exam">创建考试</button>
          <!-- <button class="btn btn-danger">批量删除考试</button> -->
          <!-- <button class="btn btn-primary" id="derive_exam">导出</button> -->
        </div>
        <div class="span8">
          <form class="form-inline search-form">
            <input type="text" name="search_exam_name" id="search_exam_name" placeholder="考试名称" value="">
            <input class="ml20 datapicker-input" type="text" readonly name="search_begin_datetimepicker" id="search_begin_datetimepicker" data-date-format="yyyy-mm-dd hh:ii" placeholder="考试开始时间" value="">
            <span>~</span>
            <input class="datapicker-input" type="text" readonly name="search_end_datetimepicker" id="search_end_datetimepicker" data-date-format="yyyy-mm-dd hh:ii" placeholder="考试结束时间" value="">
            <!-- <input class="ml20 founder-input" type="text" name="founder" id="founder" placeholder="创建人" value=""> -->
            <button class="btn btn-info ml20" id="exam_search">搜索</button>
            <button class="btn btn-danger ml20" id="clear_exam_search">清空搜索</button>
          </form>
        </div>
      </div>
      <div class="clear-fix exam-tab">
        <div class="float-left exam-tab-item active" data-status="-1">全部</div>
        <div class="float-left exam-tab-item" data-status="0">未开始</div>
        <div class="float-left exam-tab-item" data-status="1">进行中</div>
        <div class="float-left exam-tab-item" data-status="2">已结束</div>
      </div>
      <div class="has-table hide">
        <div>
          <div class="container mt20">
            <table class="exam-table" cellspacing="0" cellpadding="0">  
              <tr>
                <th class="t-item1"></th>
                <th class="t-item2">考试名称</th>
                <th class="t-item3">考试时间</th>
                <!-- <th class="t-item4">创建人</th> -->
                <th class="t-item5">创建时间</th>
                <th class="t-item6">状态</th>
                <th class="t-item7">编辑</th>
                <th class="t-item8">操作</th>
              </tr>
            </table>
          </div>
        </div>
        <div class="pagination pagination-centered">
          <ul>
            <li id="previous_page"><a><<</a></li>
            <li id="next_page"><a>>></a></li>
          </ul>
        </div>
      </div>
      <div class="hasnot-table hide">
        <div class="center">没有相应的考试</div>
      </div>
    </div>
    <!-- createExamModal -->
    <div id="examModal" class="modal hide fade" tabindex="1" role="dialog" aria-labelledby="examModalLabel" aria-hide="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="examModalLabel">创建考试</h3>
      </div>
      <div class="modal-body">
        <div class="clear-fix">
          <label class="float-left" for="password">考试名称：</label>
          <div class="float-left">
            <input type="text" id="exam_name" name="exam_name" class="input-block-level" placeholder="请输入考试名称">
          </div>
        </div>
        <div class="clear-fix">
          <label class="float-left" for="password">考试时间：</label>
          <div class="float-left">
            <input class="datapicker-input" type="text" readonly name="create_begin_datetimepicker" id="create_begin_datetimepicker" data-date-format="yyyy-mm-dd hh:ii" placeholder="请输入考试开始时间" value="">
            <span>~</span>
            <input class="datapicker-input" type="text" readonly name="create_end_datetimepicker" id="create_end_datetimepicker" data-date-format="yyyy-mm-dd hh:ii" placeholder="请输入考试结束时间" value="">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn btn-primary modal-sure">确定</button>
      </div>
    </div>
    <!-- 删除考试警告 -->
    <div id="deleteExamModal" class="modal hide fade" tabindex="1" role="dialog" aria-labelledby="deleteExamModalLabel" aria-hide="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="deleteExamModalLabel">删除考试</h3>
      </div>
      <div class="modal-body">
        <p class="color-red">删除考试将不能恢复，确定要删除吗？</p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn btn-danger modal-sure">确定</button>
      </div>
    </div>
    <!-- clone区域 -->
    <table class="hide">
      <tr class="clone-examtr hide">
        <td class="t-item1"><input type="checkbox"></td>
        <td class="t-item2 exam-name"></td>
        <td class="t-item3"><span class="exam-begin"></span>～<br /><span class="exam-end"></span></td>
        <!-- <td class="t-item4 founder-name">周星星</td> -->
        <td class="t-item5 founder-time"></td>
        <td class="t-item6 exam-status"></td>
        <td class="t-item7">
          <div class="clear-fix">
            <div class="opr-item edit-item float-left" title="编辑"></div>
            <div class="opr-item delete-item float-left" title="删除"></div>
            <div class="opr-item view-item float-left" title="查看"></div>
          </div>
        </td>
        <td class="t-item8">
          <button class="btn btn-primary start-exam">开始考试</button>
          <button class="btn btn-danger mt10 end-exam">结束考试</button>
          <button class="btn btn-info mt10 derive-exam">导出考试</button>
        </td>
      </tr>
    </table>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-datetimepicker.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>